<div class="row">
	<div class="col-md-12">
		<div class="input-group">
			<input type="text" class="form-control input-lg"
				   placeholder="{{ 'APP.ENTRIES.SEARCH.SEARCHBOX.PLACEHOLDER' | translate }}"
				   ng-model="$rootScope.entriesSearchString" on-key-enter="ctrl.loadEntries()">
			<span class="input-group-btn">
				<button class="btn btn-default btn-lg"
						type="button" ng-click="ctrl.toggleAdvancedOptions()"
						>{{ 'APP.ENTRIES.SEARCH.SEARCHBOX.BUTTON.ADVANCEDOPTIONS' | translate }}</button>
				<button class="btn btn-primary btn-lg"
						type="button" ng-click="ctrl.loadEntries()"
						title="{{ 'APP.ENTRIES.SEARCH.SEARCHBOX.BUTTON.SUBMIT' | translate }}">
					<i class="fa fa-search"></i>
				</button>
			</span>
		</div>
	</div>
</div>

<div class="row sm-mt-15" ng-show="options.is_advanced">
    <div class="col-md-3">
        <div class="form-group">
            <label class="control-label">{{ 'APP.ENTRIES.SEARCH.ADVANCED.LABEL.FILTERBY' | translate }}</label>
            <select class="form-control" ng-model="options.filterby.value" ng-options="row.name |  translate for row in options.filterby.options">
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label class="control-label">{{ 'APP.ENTRIES.SEARCH.ADVANCED.LABEL.ENTRIESPERPAGE' | translate }}</label>
            <select class="form-control" ng-model="options.rows.value" ng-options="row for row in options.rows.options">
            </select>
        </div>
    </div>
</div>

<div class="row sm-mt-15">
	<div class="col-md-12">
		<table class="table table-striped table-hover">
			<thead>
				<tr>
					<th colspan="4" ng-click="ctrl.toggleSorting('key')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.KEY' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'key'"></i>
					</th>
					<th colspan="4"></th>
				</tr>
				<tr>
					<th ng-click="ctrl.toggleSorting('organization')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.ORGANIZATION' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'organization'"></i>
					</th>
					<th ng-click="ctrl.toggleSorting('application')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.APPLICATION' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'application'"></i>
					</th>
					<th class="hidden-xs" ng-click="ctrl.toggleSorting('scope')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.SCOPE' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'scope'"></i>
					</th>
					<th class="hidden-xs" ng-click="ctrl.toggleSorting('slug')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.SLUG' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'slug'"></i>
					</th>
					<th ng-click="ctrl.toggleSorting('title')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.TITLE' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'title'"></i>
					</th>
					<th ng-click="ctrl.toggleSorting('author')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.AUTHOR' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'author'"></i>
					</th>
					<th class="hidden-xs" ng-click="ctrl.toggleSorting('created_at')">
						{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.CREATEDAT' | translate }}
						<i class="fa pull-right" ng-class="{'fa-caret-up': options.sort.value.id === 'asc',
															'fa-caret-down': options.sort.value.id === 'desc'}"
						   ng-show="options.sortby.value.id === 'created_at'"></i>
					</th>
					<th>{{ 'APP.ENTRIES.SEARCH.TABLE.HEADER.ACTIONS' | translate }}</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="result in searchResult.entries">
					<td>{{ result.key.organization}}</td>
					<td>{{ result.key.application}}</td>
					<td class="hidden-xs">{{ result.key.scope}}</td>
					<td class="hidden-xs">{{ result.key.slug}}</td>
					<td>{{ result.title}}</td>
					<td>{{ result.author}}</td>
					<td class="hidden-xs">{{ result.created_at * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
					<td>
						<button class="btn btn-xs btn-primary"
								ng-click="ctrl.goToEntry(result.key.full)">
							{{ 'APP.ENTRIES.SEARCH.TABLE.ACTION.BUTTON.DETAILS' | translate }}
						</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="row">
    <div class="col-md-12">
        <nav class="text-center">
            <ul class="pagination">
                <li ng-show="pagination.currentPage">
                    <a ng-click="ctrl.goToPage(1)">First</a>
                </li>
                <li ng-show="pagination.currentPage">
                    <a ng-click="ctrl.goToPage(pagination.currentPage - 1)">Prev</a>
                </li>
                <li ng-class="{'active': i == pagination.currentPage }" ng-repeat="i in pagination.pages">
                    <a ng-click="ctrl.goToPage(i)">{{ i}}</a>
                </li>
                <li ng-show="pagination.currentPage">
                    <a ng-click="ctrl.goToPage(pagination.currentPage + 1)">Next</a>
                </li>
                <li ng-show="pagination.currentPage">
                    <a ng-click="ctrl.goToPage(pagination.pageCount)">Last</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
